﻿@page "/GridGrouping"
<div class="demo-description mw-1100">
    <h2>Data Grid - Grouping</h2>

    <p>
        The <a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1">Data Grid</a> component enables you to drag-and-drop grid headers or use API members listed below to group data against data columns.
    </p>

    <ul>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.ShowGroupPanel">ShowGroupPanel</a> - controls the Group Panel's visibility.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGrid-1.ShowGroupedColumns">ShowGroupedColumns</a> - specifies whether the grouped columns are displayed within the grid.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.GroupIndex">GroupIndex</a> - specifies the column’s index among grouped columns. If this property is set to -1, the grid data is not grouped by the corresponding column.</li>
        <li><a class="helplink" target="_blank" href="https://docs.devexpress.com/Blazor/DevExpress.Blazor.DxDataGridColumn.AllowGroup">AllowGroup</a> - specifies if a grid can be grouped against the corresponding column.</li>
    </ul>
</div>

@if (Vacancies == null)
{
    <p><em>Loading...</em></p>
}
else
{
    <DxDataGrid Data="@Vacancies"
                ShowPager="true"
                ShowGroupPanel="true"
                CssClass="mw-1100">
        <DxDataGridColumn Field="@nameof(Vacancy.Id)" Width="70px" AllowGroup="false"></DxDataGridColumn>
        <DxDataGridColumn Field="@nameof(Vacancy.Description)" Caption="Vacancy"></DxDataGridColumn>
        <DxDataGridComboBoxColumn Field="@nameof(Vacancy.Region)" Data="@VacancyRepository.Regions" GroupIndex="0"></DxDataGridComboBoxColumn>
        <DxDataGridColumn Field="@nameof(Vacancy.City)" GroupIndex="1"></DxDataGridColumn>
    </DxDataGrid>
}

<CodeSnippet_GridGrouping></CodeSnippet_GridGrouping>

@code {
    IEnumerable<Vacancy> Vacancies;

    protected override async Task OnInitializedAsync()
    {
        Vacancies = await VacancyRepository.GetVacancies(100);
    }
}
